

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <title>Announcing vue-cli — Netinfo.Vue.js</title>
    <meta charset="utf-8">
    <meta name="description" content="Vue.js - The Progressive JavaScript Framework">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <link rel="alternate" hreflang="x-default" href="https://vuejs.org/2015/12/28/vue-cli/">
    <link rel="alternate" hreflang="zh" href="https://cn.vuejs.org/2015/12/28/vue-cli/">
    <link rel="alternate" hreflang="ja" href="https://jp.vuejs.org/2015/12/28/vue-cli/">
    <link rel="alternate" hreflang="ru" href="https://ru.vuejs.org/2015/12/28/vue-cli/">
    <link rel="alternate" hreflang="ko" href="https://kr.vuejs.org/2015/12/28/vue-cli/">
    <link rel="alternate" hreflang="pt-BR" href="https://br.vuejs.org/2015/12/28/vue-cli/">
    <link rel="alternate" hreflang="fr" href="https://fr.vuejs.org/2015/12/28/vue-cli/">

    <meta property="og:type" content="article">
    <meta property="og:title" content="Announcing vue-cli — Vue.js">
    <meta property="og:description" content="Vue.js - The Progressive JavaScript Framework">
    <meta property="og:image" content="https://cn.vuejs.org//njdf-doc/images/logo.png">

    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Announcing vue-cli — Vue.js">
    <meta name="twitter:description" content="Vue.js - The Progressive JavaScript Framework">
    <meta name="twitter:image" content="https://cn.vuejs.org/images/logo.png">

    <link rel="apple-touch-icon" sizes="57x57" href="/njdf-doc/images/icons/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/njdf-doc/images/icons/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/njdf-doc/images/icons/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/njdf-doc/images/icons/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/njdf-doc/images/icons/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/njdf-doc/images/icons/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/njdf-doc/images/icons/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/njdf-doc/images/icons/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/njdf-doc/images/icons/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="/njdf-doc/images/icons/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/njdf-doc/images/icons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="/njdf-doc/images/icons/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/njdf-doc/images/icons/favicon-16x16.png">
    <meta name="msapplication-TileImage" content="/images/icons/ms-icon-144x144.png">
    <link rel="icon" href="/njdf-doc/images/logo.png" type="image/png">

    <meta name="msapplication-TileColor" content="#4fc08d">
    <meta name="theme-color" content="#4fc08d">

    <meta name="msapplication-config" content="browserconfig.xml">
    <link rel="manifest" href="/manifest.json">

    <!-- <link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Roboto Mono' rel='stylesheet' type='text/css'> -->
    <!-- <link href='//fonts.googleapis.com/css?family=Dosis:500&text=Vue.js' rel='stylesheet' type='text/css'> -->

    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- main page styles -->
    <link rel="stylesheet" href="/njdf-doc/css/page.css">

    <!-- this needs to be loaded before guide's inline scripts -->
    <script src="/njdf-doc/js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
      Vue.config.productionTip = true
      window.PAGE_TYPE = ""
    </script>

    <!-- ga -->
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-46852172-3', 'cn.vuejs.org');
      ga('send', 'pageview');
    </script>
  </head>
  <body class="docs">
    <div id="mobile-bar" >
      <a class="menu-button"></a>
      <a class="logo" href="/"></a>
    </div>
    <div id="header">
  <a id="logo" href="/njdf-doc/">
    <img src="/njdf-doc/images/logo.png" alt="vue logo">
    <span>Netinfo.Vue.js</span>
  </a>
  <ul id="nav">
    <li>
  <!--<form id="search-form">
    <input type="text" id="search-query-nav" class="search-query st-default-search-input">
  </form>-->
</li>
<!--<li class="nav-dropdown-container learn">
  <a class="nav-link">学习</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><ul>
      <li><a href="/njdf-doc/v2/guide/" class="nav-link">教程</a></li>
      <li><a href="/njdf-doc/v2/api/" class="nav-link">API</a></li>
      <li><a href="/njdf-doc/v2/style-guide/" class="nav-link">风格指南</a></li>
      <li><a href="/njdf-doc/v2/examples/" class="nav-link">示例</a></li>
      <li><a href="/njdf-doc/v2/cookbook/" class="nav-link">Cookbook</a></li>
    </ul></li>
  </ul>
</li>
-->
<!--<li class="nav-dropdown-container ecosystem">
  <a class="nav-link">生态系统</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><h4>帮助</h4></li>
    <li><ul>
      <li><a href="https://forum.vuejs.org/" class="nav-link" target="_blank">论坛</a></li>
      <li><a href="https://chat.vuejs.org/" class="nav-link" target="_blank">聊天室</a></li>
      <li><a href="https://www.vuemeetups.org/" class="nav-link" target="_blank">聚会</a></li>
    </ul></li>
    <li><h4>工具</h4></li>
    <li>
      <ul>
        <li><a href="https://github.com/vuejs/vue-devtools" class="nav-link" target="_blank">Devtools</a></li>
        <li><a href="https://cli.vuejs.org/" class="nav-link" target="_blank">Vue CLI</a></li>
        <li><a href="https://vue-loader.vuejs.org" class="nav-link" target="_blank">Vue Loader</a></li>
      </ul>
    </li>
    <li><h4>核心插件</h4></li>
    <li><ul>
      <li><a href="https://router.vuejs.org/" class="nav-link" target="_blank">Vue Router</a></li>
      <li><a href="https://vuex.vuejs.org/" class="nav-link" target="_blank">Vuex</a></li>
      <li><a href="https://ssr.vuejs.org/" class="nav-link" target="_blank">Vue 服务端渲染</a></li>
    </ul></li>
    <li><h4>信息</h4></li>
    <li><ul>
      <li><a href="https://news.vuejs.org" class="nav-link" target="_blank">周刊</a></li>
      <li><a href="https://github.com/vuejs/roadmap" class="nav-link" target="_blank">Roadmap</a></li>
      <li><a href="https://twitter.com/vuejs" class="nav-link" target="_blank">Twitter</a></li>
      <li><a href="https://medium.com/the-vue-point" class="nav-link" target="_blank">博客</a></li>
      <li><a href="https://vuejobs.com/?ref=vuejs" class="nav-link" target="_blank">工作</a></li>
    </ul></li>
    <li><h4>资源列表</h4></li>
    <li><ul>
      <li><a href="https://github.com/vuejs" class="nav-link" target="_blank">官方仓库</a></li>
      <li><a href="https://curated.vuejs.org/" class="nav-link" target="_blank">Vue 优选</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" class="nav-link" target="_blank">Vue 资源</a></li>
    </ul></li>
  </ul>
</li>
-->

<!--<li class="nav-dropdown-container support-vue">
  <a href="/support-vuejs/" class="nav-link">支持 Vue</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><ul>
      <li><a href="/support-vuejs/#One-time-Donations" class="nav-link">一次性赞助</a></li>
      <li><a href="/support-vuejs/#Recurring-Pledges" class="nav-link">周期性赞助</a></li>
      <li><a href="https://www.smallsticker.com/%E8%B4%B4%E7%BA%B8/vue.html" class="nav-link">贴纸</a></li>
      <li><a href="https://vue.threadless.com" target="_blank" class="nav-link">T 恤商店</a></li>
    </ul></li>
  </ul>
</li>
-->
<!--<li class="nav-dropdown-container language">
  <a class="nav-link">多语言</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><a href="https://vuejs.org/2015/12/28/vue-cli/" class="nav-link" target="_blank">English</a></li>
    <li><a href="https://jp.vuejs.org/2015/12/28/vue-cli/" class="nav-link" target="_blank">日本語</a></li>
    <li><a href="https://ru.vuejs.org/2015/12/28/vue-cli/" class="nav-link" target="_blank">Русский</a></li>
    <li><a href="https://kr.vuejs.org/2015/12/28/vue-cli/" class="nav-link" target="_blank">한국어</a></li>
    <li><a href="https://br.vuejs.org/2015/12/28/vue-cli/" class="nav-link" target="_blank">Português</a></li>
    <li><a href="https://fr.vuejs.org/2015/12/28/vue-cli/" class="nav-link" target="_blank">Français</a></li>
    <li><a href="https://vi.vuejs.org/2015/12/28/vue-cli/" class="nav-link" target="_blank">Tiếng Việt</a></li>
  </ul>
</li>
-->
<!--<li><a href="https://github.com/vuejs/cn.vuejs.org/" target="_blank" class="nav-link contribute">参与翻译</a></li>-->

<li><a href="/njdf-doc/v2/guide/" class="nav-link">教程</a></li>
<li><a href="/njdf-doc/v2/components/" class="nav-link">组件</a></li>
<li><a href="/njdf-doc/v2/api/" class="nav-link">API</a></li>
<li><a href="/njdf-doc/v2/style-guide/" class="nav-link">风格指南</a></li>
<li><a href="/njdf-doc/v2/examples/" class="nav-link">示例</a></li>
<li><a href="/njdf-doc/v2/cookbook/" class="nav-link">Cookbook</a></li>


<li>
  <a href="/njdf-doc/v2/aboutus/" class="nav-link team">关于我们</a>
</li>

  </ul>
</div>

    
      <div id="main" class="fix-sidebar">
        
          <div class="sidebar blog">
  <div class="sidebar-inner">
    <ul class="main-menu">
      <li>
  <!--<form id="search-form">
    <input type="text" id="search-query-nav" class="search-query st-default-search-input">
  </form>-->
</li>
<!--<li class="nav-dropdown-container learn">
  <a class="nav-link">学习</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><ul>
      <li><a href="/njdf-doc/v2/guide/" class="nav-link">教程</a></li>
      <li><a href="/njdf-doc/v2/api/" class="nav-link">API</a></li>
      <li><a href="/njdf-doc/v2/style-guide/" class="nav-link">风格指南</a></li>
      <li><a href="/njdf-doc/v2/examples/" class="nav-link">示例</a></li>
      <li><a href="/njdf-doc/v2/cookbook/" class="nav-link">Cookbook</a></li>
    </ul></li>
  </ul>
</li>
-->
<!--<li class="nav-dropdown-container ecosystem">
  <a class="nav-link">生态系统</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><h4>帮助</h4></li>
    <li><ul>
      <li><a href="https://forum.vuejs.org/" class="nav-link" target="_blank">论坛</a></li>
      <li><a href="https://chat.vuejs.org/" class="nav-link" target="_blank">聊天室</a></li>
      <li><a href="https://www.vuemeetups.org/" class="nav-link" target="_blank">聚会</a></li>
    </ul></li>
    <li><h4>工具</h4></li>
    <li>
      <ul>
        <li><a href="https://github.com/vuejs/vue-devtools" class="nav-link" target="_blank">Devtools</a></li>
        <li><a href="https://cli.vuejs.org/" class="nav-link" target="_blank">Vue CLI</a></li>
        <li><a href="https://vue-loader.vuejs.org" class="nav-link" target="_blank">Vue Loader</a></li>
      </ul>
    </li>
    <li><h4>核心插件</h4></li>
    <li><ul>
      <li><a href="https://router.vuejs.org/" class="nav-link" target="_blank">Vue Router</a></li>
      <li><a href="https://vuex.vuejs.org/" class="nav-link" target="_blank">Vuex</a></li>
      <li><a href="https://ssr.vuejs.org/" class="nav-link" target="_blank">Vue 服务端渲染</a></li>
    </ul></li>
    <li><h4>信息</h4></li>
    <li><ul>
      <li><a href="https://news.vuejs.org" class="nav-link" target="_blank">周刊</a></li>
      <li><a href="https://github.com/vuejs/roadmap" class="nav-link" target="_blank">Roadmap</a></li>
      <li><a href="https://twitter.com/vuejs" class="nav-link" target="_blank">Twitter</a></li>
      <li><a href="https://medium.com/the-vue-point" class="nav-link" target="_blank">博客</a></li>
      <li><a href="https://vuejobs.com/?ref=vuejs" class="nav-link" target="_blank">工作</a></li>
    </ul></li>
    <li><h4>资源列表</h4></li>
    <li><ul>
      <li><a href="https://github.com/vuejs" class="nav-link" target="_blank">官方仓库</a></li>
      <li><a href="https://curated.vuejs.org/" class="nav-link" target="_blank">Vue 优选</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" class="nav-link" target="_blank">Vue 资源</a></li>
    </ul></li>
  </ul>
</li>
-->

<!--<li class="nav-dropdown-container support-vue">
  <a href="/support-vuejs/" class="nav-link">支持 Vue</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><ul>
      <li><a href="/support-vuejs/#One-time-Donations" class="nav-link">一次性赞助</a></li>
      <li><a href="/support-vuejs/#Recurring-Pledges" class="nav-link">周期性赞助</a></li>
      <li><a href="https://www.smallsticker.com/%E8%B4%B4%E7%BA%B8/vue.html" class="nav-link">贴纸</a></li>
      <li><a href="https://vue.threadless.com" target="_blank" class="nav-link">T 恤商店</a></li>
    </ul></li>
  </ul>
</li>
-->
<!--<li class="nav-dropdown-container language">
  <a class="nav-link">多语言</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><a href="https://vuejs.org/2015/12/28/vue-cli/" class="nav-link" target="_blank">English</a></li>
    <li><a href="https://jp.vuejs.org/2015/12/28/vue-cli/" class="nav-link" target="_blank">日本語</a></li>
    <li><a href="https://ru.vuejs.org/2015/12/28/vue-cli/" class="nav-link" target="_blank">Русский</a></li>
    <li><a href="https://kr.vuejs.org/2015/12/28/vue-cli/" class="nav-link" target="_blank">한국어</a></li>
    <li><a href="https://br.vuejs.org/2015/12/28/vue-cli/" class="nav-link" target="_blank">Português</a></li>
    <li><a href="https://fr.vuejs.org/2015/12/28/vue-cli/" class="nav-link" target="_blank">Français</a></li>
    <li><a href="https://vi.vuejs.org/2015/12/28/vue-cli/" class="nav-link" target="_blank">Tiếng Việt</a></li>
  </ul>
</li>
-->
<!--<li><a href="https://github.com/vuejs/cn.vuejs.org/" target="_blank" class="nav-link contribute">参与翻译</a></li>-->

<li><a href="/njdf-doc/v2/guide/" class="nav-link">教程</a></li>
<li><a href="/njdf-doc/v2/components/" class="nav-link">组件</a></li>
<li><a href="/njdf-doc/v2/api/" class="nav-link">API</a></li>
<li><a href="/njdf-doc/v2/style-guide/" class="nav-link">风格指南</a></li>
<li><a href="/njdf-doc/v2/examples/" class="nav-link">示例</a></li>
<li><a href="/njdf-doc/v2/cookbook/" class="nav-link">Cookbook</a></li>


<li>
  <a href="/njdf-doc/v2/aboutus/" class="nav-link team">关于我们</a>
</li>

    </ul>
    <div class="list">
      <h2>
        Recent Posts
        <a href="/njdf-doc/atom.xml" target="_blank" style="vertical-align: middle; margin-left: 5px;">
          <img src="/njdf-doc/images/feed.png" style="width: 15px; height: 15px;">
        </a>
      </h2>
      <ul style="padding: 0;">
      
        <li>
          <a href="/2016/04/27/announcing-2.0/" class="sidebar-link">Announcing Vue.js 2.0</a>
        </li>
      
        <li>
          <a href="/2016/03/14/march-update/" class="sidebar-link">March 2016 Update</a>
        </li>
      
        <li>
          <a href="/2016/02/06/common-gotchas/" class="sidebar-link">Common Beginner Gotchas</a>
        </li>
      
        <li>
          <a href="/2015/12/28/vue-cli/" class="sidebar-link current">Announcing vue-cli</a>
        </li>
      
        <li>
          <a href="/2015/10/28/why-no-template-url/" class="sidebar-link">Why Vue.js doesn't support templateURL</a>
        </li>
      
        <li>
          <a href="/2015/10/26/1.0.0-release/" class="sidebar-link">Vue.js 1.0.0 Released</a>
        </li>
      
        <li>
          <a href="/2015/06/11/012-release/" class="sidebar-link">Vue.js 0.12 released!</a>
        </li>
      
        <li>
          <a href="/2014/12/08/011-component/" class="sidebar-link">0.11 Component Tips</a>
        </li>
      
        <li>
          <a href="/2014/11/09/vue-011-release/" class="sidebar-link">Vue.js 0.11 released!</a>
        </li>
      
        <li>
          <a href="/2014/07/29/vue-next/" class="sidebar-link">Vue.js 0.10.6, and what's next</a>
        </li>
      
      </ul>
    </div>
  </div>
</div>
<div class="content with-sidebar blog post">
  <div id="ad">
  <!--<a href="https://time.geekbang.org/column/intro/81?utm_source=website&utm_medium=vue&utm_campaign=81-onsell&utm_content=201805banner" target="_blank" rel="nofollow">
    <img src="/images/geekbang5.gif" alt="极客时间">
  </a>-->
</div>

  <h1>Announcing vue-cli</h1>
  <h4>Dec 28, 2015</h4>
  <p>Recently there has been a lot of <a href="https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4#.chg95e5p6" target="_blank" rel="noopener">discussion around the tooling hurdle</a> when you start a React project. Luckily for Vue.js, all you need to do to start with a quick prototype is including it from a CDN via a <code>&lt;script&gt;</code> tag, so we’ve got that part covered. However, that’s not how you’d build a real world application. In real world applications we inevitably need a certain amount of tooling to give us modularization, transpilers, pre-processors, hot-reload, linting and testing. These tools are necessary for the long-term maintainability and productivity of large projects, but the initial setup can be a big pain. This is why we are announcing <a href="https://github.com/vuejs/vue-cli" target="_blank" rel="noopener">vue-cli</a>, a simple CLI tool to help you quickly scaffold Vue.js projects with opinionated, battery-included build setups.</p>
<a id="more"></a>
<h3 id="Just-The-Scaffolding"><a href="#Just-The-Scaffolding" class="headerlink" title="Just The Scaffolding"></a>Just The Scaffolding</h3><p>The usage looks like this:</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm install -g vue-cli</span><br><span class="line">vue init webpack my-project</span><br><span class="line"><span class="comment"># answer prompts</span></span><br><span class="line"><span class="built_in">cd</span> my-project</span><br><span class="line">npm install</span><br><span class="line">npm run dev <span class="comment"># tada!</span></span><br></pre></td></tr></table></figure>
<p>All the CLI does is pulling down templates from the <a href="https://github.com/vuejs-templates" target="_blank" rel="noopener">vuejs-templates</a> organization on GitHub. Dependencies are handled via NPM, and build tasks are simply NPM scripts.</p>
<h3 id="Official-Templates"><a href="#Official-Templates" class="headerlink" title="Official Templates"></a>Official Templates</h3><p>The purpose of official Vue project templates is providing opinionated, battery-included development tooling setups so that users can get started with actual app code as fast as possible. However, these templates are un-opinionated in terms of how you structure your app code and what libraries you use in addition to Vue.js.</p>
<p>All official project templates are repos in the <a href="https://github.com/vuejs-templates" target="_blank" rel="noopener">vuejs-templates organization</a>. When a new template is added to the organization, you will be able to run <code>vue init &lt;template-name&gt; &lt;project-name&gt;</code> to use that template. You can also run <code>vue list</code> to see all available official templates.</p>
<p>Current available templates include:</p>
<ul>
<li><p><a href="https://github.com/vuejs-templates/browserify" target="_blank" rel="noopener">browserify</a> - A full-featured Browserify + vueify setup with hot-reload, linting &amp; unit testing.</p>
</li>
<li><p><a href="https://github.com/vuejs-templates/browserify-simple" target="_blank" rel="noopener">browserify-simple</a> - A simple Browserify + vueify setup for quick prototyping.</p>
</li>
<li><p><a href="https://github.com/vuejs-templates/webpack" target="_blank" rel="noopener">webpack</a> - A full-featured Webpack + vue-loader setup with hot reload, linting, testing &amp; css extraction.</p>
</li>
<li><p><a href="https://github.com/vuejs-templates/webpack-simple" target="_blank" rel="noopener">webpack-simple</a> - A simple Webpack + vue-loader setup for quick prototyping.</p>
</li>
</ul>
<h3 id="Bring-Your-Own-Setup"><a href="#Bring-Your-Own-Setup" class="headerlink" title="Bring Your Own Setup"></a>Bring Your Own Setup</h3><p>If you are not happy with the official templates, you can fork these templates, modify them to fit your specific needs (or even create your own from scratch), and use them via <code>vue-cli</code> too, because <code>vue-cli</code> can work directly on GitHub repos:</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">vue init username/repo my-project</span><br></pre></td></tr></table></figure>
<h3 id="Vue-Components-Everywhere"><a href="#Vue-Components-Everywhere" class="headerlink" title="Vue Components Everywhere"></a>Vue Components Everywhere</h3><p>There are different templates for different purposes: simple setups for quick prototyping, and full-featured setups for ambitious applications. A common feature among these templates though, is that they all support <code>*.vue</code> single file components. This means any third party Vue components written as valid <code>*.vue</code> files can be shared among projects using these setups, and simply be distributed over NPM - let’s create more reusable components!</p>

</div>

        
      </div>
      <script src="/njdf-doc/js/smooth-scroll.min.js"></script>
    

    <!-- main custom script for sidebars, version selects etc. -->
    <script src="/njdf-doc/js/css.escape.js"></script>
    <script src="/njdf-doc/js/common.js"></script>

    <!-- search -->
    <link href="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="/njdf-doc/css/search.css">
    <script src="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
    <script>
    [
      '#search-query-nav',
      '#search-query-sidebar',
      '#search-query-menu'
    ].forEach(function (selector) {
      if (!document.querySelector(selector)) return
      // search index defaults to v2
      var match = window.location.pathname.match(/^\/(v\d+)/)
      var version = match ? match[1] : 'v2'
      docsearch({
      appId: 'BH4D9OD16A',
      apiKey: '5638280abff9d207417bb03be05f0b25',
      indexName: 'vuejs_cn2',
      inputSelector: selector,
      algoliaOptions: { facetFilters: ["version:" + version] }
      })
    })
    </script>

    <!-- fastclick -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
      FastClick.attach(document.body)
    }, false)
    </script>
  </body>
</html>
